import React, {Component} from 'react';
import {Button, Input, message} from "antd";

class Settings extends Component {

    state = {
        username: "",
        className: "",
        phone: "",
        id: ""
    }

    componentDidMount() {
        let username = localStorage.getItem("username");
        let className = localStorage.getItem("classname");
        let phone = localStorage.getItem("phone");
        let id = localStorage.getItem("id");
        this.setState({
            username, className, phone, id
        })
    }

    onClickReturn = () => {
        let {username, phone, className, id} = this.state;
        if (username === null || phone === null || className === null || id === null){
            return false;
        }else if (username.trim() === "" || phone.trim() === "" || className.trim() === "" || id.trim() === ""){
            message.info("信息并未填写完整")
            return false;
        }else {
            localStorage.setItem("username", username);
            localStorage.setItem("classname", className);
            localStorage.setItem("phone", phone);
            localStorage.setItem("id", id);
            if (this.props.onReturn) this.props.onReturn();
        }
    }

    render() {
        let {username, phone, className, id} = this.state;
        return (
            <div style={{ padding: "20px 10px" }}>
                <h2 style={{ textAlign: "center"}}>自请假系统设置</h2>
                <div>
                    <Input
                        placeholder="请输入姓名"
                        value={username}
                        onChange={(v)=>{ this.setState({ username: v.target.value }) }}
                    />
                    <Input
                        placeholder="请输入学号"
                        value={id}
                        onChange={(v)=>{ this.setState({ id: v.target.value }) }}
                    />
                    <Input
                        placeholder="请输入班级"
                        value={className}
                        onChange={(v)=>{ this.setState({ className: v.target.value }) }}
                    />
                    <Input
                        placeholder="请输入手机号"
                        value={phone}
                        onChange={(v)=>{ this.setState({ phone: v.target.value }) }}
                    />
                    <div>
                        <Button style={{ margin: "10px auto" }} onClick={this.onClickReturn}>确认</Button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Settings;
